<template>
	<view>
		  <view class="topFrame">
			  <view class="teacherInfo">
			  	<view class="teaImg"><image src="../../static/scheduleimg/lily.png"></image></view>
				<view class="teacherName">Lily</view>
				<view class="teacherTitle">暂无标签</view>
			  </view>
		  </view>
		  <view class="bannerList" >
			  <view class="listType" v-for="(item,index) in listType">
			  	<image :src="item.icon" ></image>
				<view class="iconName">{{item.iconname}}</view>
			  </view>
		  </view>
		  <view class="dateList">
			  <view class="today">
			  	<view class="fs30 todayWeek">今天</view>
				<view class="fs30 todayDate">10-09</view>
			  </view>
			  <view class="classDate" v-for="(item,index) in classDate">
			  	<view class="fs30 ">{{item.week}}</view>
				<view class="fs30 ">{{item.date}}</view>
			  </view>
		  </view>
		  <view class="timeTable">
			  <view class="startTime" v-for="(item,index) in startTime">
			  	<view class="fs30 " >{{item.time}}</view>
			  	<view class="fs30 ">{{item.status}}</view>
			  </view>
			  <view class="notstartTime" v-for="(item,index) in notstartTime">
			  	<view class="fs30" @click="goto('/pages/index/timetable')">{{item.time}}</view>
			  </view>
		  </view>
		  <view class="bottomFrame">
		  	<view class="exit">退出</view>
			<view class="ensure">确定预约</view>
		  </view>
		  
	</view>
</template>

<script>
	 
	export default {
		 
		data() {
			return{
				listType:[],
				classDate:[],
				startTime:[],
				notstartTime:[],
				startType:0,
			};
		},
		watch: {
		 
		},
		onPageScroll(e) {
			 
		},
		onLoad(e) {
			// 获取邀请码保存到本地
			this.loadlistType();
			this.loadclassDate();
			this.loadstartTime();
			this.loadnotstartTime();
			 
		},
		//下拉刷新
		onPullDownRefresh() {
		 
		},
		//加载更多
		onReachBottom() {
		 
		},
		onHide() {
			//离开页面时关闭吸顶功能,用于处理h5环境运行下'bottom' of null报错的问题
			this.enable = false
		},
		onShow() {
		 
		},
		methods: {
			
			goto(url){
				console.log("加载页面:" , url )
				uni.navigateTo({
					url 
				});
			},
			
			
			loadlistType(){
				let rs = [
					{
						icon:"../../static/scheduleimg/a1.png",
						iconname:"关注",
					},
					{
						icon:"../../static/scheduleimg/a2.png",
						iconname:"音频",
					},
					{
						icon:"../../static/scheduleimg/a3.png",
						iconname:"视频",
					},
					{
						icon:"../../static/scheduleimg/a4.png",
						iconname:"详细介绍",
					},
					{
						icon:"../../static/scheduleimg/a5.png",
						iconname:"推荐",
					},
				];
				
				this.listType = rs;
			},
			
			
			loadclassDate(){
				let rs = [
					{
						week:"周四",
						date:"10-10",
					},
					{
						week:"周五",
						date:"10-11",
					},
					{
						week:"周六",
						date:"10-12",
					},
					{
						week:"周日",
						date:"10-13",
					},
					{
						week:"周一",
						date:"10-14",
					},
					{
						week:"周二",
						date:"10-15",
					},
				];
					
					this.classDate = rs;
			},
			
			
			loadstartTime(){
				let rs = [
					{
						time:"12:00",
						status:"已开课",
					},
					{
						time:"12:30",
						status:"已开课",
					},
					{
						time:"13:00",
						status:"已开课",
					},
					{
						time:"13:30",
						status:"已开课",
					},
					{
						time:"14:00",
						status:"已开课",
					},
					{
						time:"14:30",
						status:"已开课",
					},
					{
					time:"15:00",
					status:"已开课",
					},
					{	
						time:"15:30",
						status:"已开课",
					},
					{
						time:"16:00",
						status:"已开课",
					},
					{
						time:"16:30",
						status:"已开课",
					},
					{
						time:"17:00",
						status:"已开课",
					},
					{
						time:"17:30",
						status:"已开课",
					},
					{
						time:"18:00",
						status:"已开课",
					},
				];	
				this.startTime = rs;
			},
			
			
			loadnotstartTime(){
				let rs = [
					{
						time:"18:30",
					},
					{
						time:"19:00",
					},
					{
						time:"19:30",
					},
					{
						time:"20:00",
					},
					{
						time:"20:30",
					},
					{
						time:"21:00",
					},
					{
						time:"21:30",
					},
				];
				this.notstartTime = rs;	
			}		
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}
	.topFrame{
		border: 0px solid #ff0000;
		height: 140px;
		width: 100%;
	}
	.teacherInfo{
		border: 0rpx solid #ff0000;
		width: 30%;
		height: 250rpx;
		margin-top: 20rpx;
		margin-left: 260rpx;
	}
	.teaImg{
		border: 0rpx solid #ff0000;
		border-radius: 50%;
		height: 180rpx;
	}
	.teaImg image{
		margin-top: 1rpx;
		border-radius: 50%;
		width: 100%;
		height: 100%;
		display: inline-block;
		box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
		}
	.teacherName{
		color: #000000;
		font-weight: bold;
		margin-top: 10rpx;
		margin-left: 80rpx;
		font-size: 30rpx;
	}
	.teacherTitle{
		color: #cfcfcf;
		margin-left: 60rpx;
	}
	.bannerList{
		border: 1px solid #fafafa;
		background-color: #fafafa;
		border-radius: 10rpx;
		width: 92%;
		height: 140rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	.listType{
		border: 0px solid #ff0000;
		margin-top: 10rpx;
		width: 120rpx;
		height: 125rpx;
	}
	.listType image{
		width: 70%;
		height: 60%;
		margin-left: 16rpx;
	}
	.iconName{
		border: 0px solid #ff0000;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
	}
	.dateList{
		margin-top: 20rpx;
		border: 0px solid #ff0000;
		width: 100%;
		height:125rpx;
		display: flex;
	}
	.today{
		border: 1px solid #929292;
		background-color: #929292;
		width:125rpx;
		text-align: center;
		padding-top: 20rpx;
		line-height: 1.5;
	}
	.fs{
		font-size: 30rpx;
	}
	.todayWeek{
		font-weight: bold;
	}
	.todayDate{
		font-weight: bold;
	}
	.classDate{
		width:120rpx;
		border: 1px solid #fafafa;
		background-color: #fafafa;
		text-align: center;
		padding-top: 20rpx;
		line-height: 1.5;
	}
	.timeTable{
		border: 0px solid #ff0000;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: space-evenly;
	}
	.startTime{
		background-image: url(../../static/scheduleimg/green.png);
		background-repeat: no-repeat;
		background-position: 110rpx 10rpx;
		background-size: 20rpx;
		border: 1px solid #fafafa;
		background-color: #fafafa;
		width: 160rpx;
		height: 120rpx;
		text-align: center;
		padding-top: 20rpx;
		margin-top: 20rpx;
		line-height: 1.5;
	}
	.notstartTime{
		background-image: url(../../static/scheduleimg/green.png);
		background-repeat: no-repeat;
		background-position: 110rpx 10rpx;
		background-size: 20rpx;
		border: 1px solid #fafafa;
		background-color: #fafafa;
		width: 160rpx;
		height: 120rpx;
		text-align: center;
		font-weight: bold;
		padding-top: 40rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.bottomFrame{
		border: 1px solid #c2c2c2;
		background-color: #f7f7f7;
		width: 100%;
		height: 120rpx;
		margin-bottom: 0rpx;
		display: flex;
	}
	.exit{
		border: 1px solid #f2f2f2;
		background-color: #f2f2f2;
		width: 200rpx;
		font-size: 36rpx;
		text-align: center;
		letter-spacing: 2rpx;
		font-weight: bold;
		padding-top: 20rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.ensure{
		border: 1px solid #07c160;
		background-color: #07c160;
		width: 600rpx;
		font-size: 36rpx;
		text-align: center;
		letter-spacing: 2rpx;
		font-weight: bold;
		padding-top: 20rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	
 
</style>